<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='用户信息',active='userInfo',status='baseOpen'">
<head th:replace="common/left::leftFragment(${title},${active})"></head>
  <link th:href="@{/js/data-tables/DT_bootstrap.css}"  rel="stylesheet" />
<body class="sticky-header">
<section>
   <div th:replace="common/left::left-body"></div>
    
    <!-- main content start-->
    <div class="main-content" >

      	<div th:replace="common/header::header-content"></div>
      	
        <!--body wrapper start-->
        <div class="wrapper">
        
            <div class="row">
        <div class="col-sm-12">
        <section class="panel">
        <header class="panel-heading">
            用户信息
        </header>
        <div class="panel-body">
        <div class="adv-table editable-table"> 
       				 			 
                    <div class="row">
	                    <div class="col-lg-6">
	                     <div class="btn-group">
	                        <button id="editable-sample_new" class="btn btn-primary">
	                            Add New <i class="fa fa-plus"></i>
	                        </button>
	                    </div>
	                    </div>
	                    
	                    <div class="col-lg-6">
	                    <div class="dataTables_filter" >
	                    <label>Search: <input  class="form-control medium" type="text"></label>
	                    </div>
	                    </div>
                   
                    </div>
       				 
		     	   <table class="table table-striped table-hover table-bordered"  id="editable-sample"  >
		        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>状态</th>
                                <th>性别</th>
                                <th>生日</th>
                                <th>地址</th>
                                <th>手机号</th>
                                <th>Email</th>
                                <th >Edit</th>
                                <th>Cancel</th>
                            </tr>
                </thead>
                            <tbody>
                            <th:block th:each="userInfo : ${userInfo.list}">
                                <tr th:attr="id=${userInfo.id}">
                                    <td  th:text="${userInfo.username}"  ></td>
                                    <td>
                                       <th:block th:if="${userInfo.enable== 0}">
                                            <span>禁用</span>
                                        </th:block>
                                        <th:block th:if="${userInfo.enable == 1}">
                                            <span>启用</span>
                                        </th:block>
                                    </td>
                                     <td>
                                       <th:block th:if="${userInfo.sex== '0'}">
                                            <span>男</span>
                                        </th:block>
                                        <th:block th:if="${userInfo.sex== '1'}">
                                            <span>女</span>
                                        </th:block>
                                    </td>
                                    <td  th:text="${#dates.format(userInfo.birthday,'yyyy-MM-dd HH:mm:ss')}"  ></td>
                                    <td  th:text="${userInfo.address}"  ></td>
                                    <td  th:text="${userInfo.phone}"  ></td>
                                    <td  th:text="${userInfo.email}"  ></td>
                                    <td><a class="edit" href="javascript:;">Edit</a></td>
                    				<td><a class="delete" href="javascript:;">Delete</a></td>
                                </tr>
                            </th:block>
                            </tbody>
		        </table>
		          <div th:replace="common/pagination :: pageNav(${userInfo})"></div> 
        </div>
        </div>
        </section>
        </div>
        </div>
            
        </div>
        <!--body wrapper end-->
		<div th:replace="common/footer :: footer-content"></div>
    </div>
    <!-- main content end-->
</section>
<div th:replace="common/footer :: footer"></div>
<script  th:src="@{/js/data-tables/jquery.dataTables.js}"></script>
<script  th:src="@{/js/data-tables/DT_bootstrap.js}"></script>
<script th:src="@{/js/bootstrap-table.js}"></script>  
<script th:src="@{/js/editable-table.js}"></script>
<script>
    jQuery(document).ready(function() {
        EditableTable.init();
    });
</script>
</body>
</html>
